<footer class="footer">
  <span class="todo-count">
    <strong>{{activeTodoCount}}</strong> {{ activeTodoCount > 1? 'items':'item'}} left
  </span>
  <ul class="filters">
    <li><a (click)="handleFilterChange('all')" class="{{visibilityFilter == 'all'? 'selected':''}}">All</a></li>
    <li><a (click)="handleFilterChange('active')" class="{{visibilityFilter == 'active'? 'selected':''}}">Active</a></li>
    <li><a (click)="handleFilterChange('completed')" class="{{visibilityFilter == 'completed'? 'selected':''}}">Completed</a></li>
  </ul>
  <button class="clear-completed" *ngIf="completedTodoCount"
    (click)="handleClearCompletedTodo()"
  >
    Clear completed
  </button>
</footer>
